<template>
	<div>
		<Headerback />
		<div class="header">
				<img src="../../assets/images/serviceimg/czk_01.png" alt="">
				<div class="info">
					<p class="one">宜居储值卡</p>
					<p class="two">0.00</p>
					<p class="three">当前余额</p>
				</div>
		</div>
		<div class="con">
			<ul>
				<li>
					<div class="left">
						<p>￥100.00</p>	
						<p>	赠送100元</p>
					</div>
					<div class="right">
						<span>新人优惠</span>
						<button>购买</button>
					</div>
				</li>
				<li>
					<div class="left">
						<p>￥300.00</p>	
						<p>	赠送20元</p>
					</div>
					<div class="right">
						<button>购买</button>
					</div>
				</li>
				<li>
					<div class="left">
						<p>￥500.00</p>	
						<p>	赠送40元</p>
					</div>
					<div class="right">
						<button>购买</button>
					</div>
				</li>
				<li>
					<div class="left">
						<p>￥1000.00</p>	
						<p>	赠送100元</p>
					</div>
					<div class="right">
						<button>购买</button>
					</div>
				</li>
				<li>
					<div class="left">
						<p>￥100.00</p>	
						<p>	赠送100元</p>
					</div>
					<div class="right">
						<button>购买</button>
					</div>
				</li>
				<li>
					<div class="left">
						<p>￥1200.00</p>	
						<p>	赠送120元</p>
					</div>
					<div class="right">
						<button>购买</button>
					</div>
				</li>
				
			</ul>
		</div>
	</div>
</template>
<script>
	import Headerback from "./components/headerback"
	export default{
		name:'dailclean',
		data(){
			return{

			}
		},
		components:{
			Headerback
		}
	}
</script>
<style scoped lang="less">
	.header{
		width: 100%;
		height: 470/2/50rem;
		position:relative;
		img{
				width: 100%;
				height: 470/2/50rem;
			}
		.info{
			position: absolute;
			top:  70/2/50rem;
			left: 280/2/50rem;
			font-size: 33/2/50rem;
			color: #fff;
			text-align: center;
			.two{
				padding-top:100/2/50rem;
				padding-bottom: 50/2/50rem;
				font-size: 80/2/50rem;
			}
		}	
	}
	.con{
		width: 100%;
		ul{
			width: 90%;
			margin:0 auto;
			li{
				height:148/2/50rem;
				border-bottom: 1px solid #c9c9c9;
				.left{
					padding-top: 50/2/50rem;
					padding-left: 20/2/50rem;
					float: left;
				}
				.right{
					padding-top: 70/2/50rem;
					padding-left: 20/2/50rem;
					float: right;
					padding-right: 20/2/50rem;
					position: relative;
					span{
						color:#ff5555;
						position: absolute;
						top:22/2/50rem;
						left:0;
					}
					button{
						background-color: #409aff;
						border:none;
						width: 75/2/50rem;
						height: 40/2/50rem;
						font-size: 24/2/50rem;
						color:#fff;
					}
				}
			}
		}
	}
</style>